<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{number}}.{{title}}</title>
    
    <!-- 外部依赖 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/highlight.js@11.7.0/lib/highlight.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/highlight.js@11.7.0/lib/languages/cpp.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked@4.3.0/marked.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js"></script>
    
    <!-- 代码高亮样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.7.0/styles/github.min.css"
        id="hljs-light">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.7.0/styles/github-dark.min.css"
        id="hljs-dark" disabled>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/judge.css">

    <script>
        // 配置marked选项
        marked.setOptions({
            breaks: true,      // 允许换行符转换为<br>
            gfm: true,        // 启用GitHub风格的Markdown
            headerIds: true,   // 为标题添加id
            mangle: false,     // 不转义内联HTML
            sanitize: false    // 不净化输出
        });
    </script>
</head>

<body>
    <nav class="navbar">
        <div class="nav-links">
            <a href="/" class="nav-link">首页</a>
            <a href="/all_questions" class="nav-link">题库</a>
        </div>
        <div class="nav-right">
            <button class="theme-toggle" id="themeToggle">
                <i class="fas fa-sun"></i>
            </button>
        </div>
    </nav>

    <div class="container">
        <div class="code-container">
            <div class="left-desc">
                <h3><span id="number">{{number}}</span>.{{title}}-{{star}}</h3>
                <div id="markdown-content" class="markdown-content">{{desc}}</div>
            </div>
            <div class="resizer" id="dragMe"></div>
            <div class="right-code">
                <pre id="code" class="ace_editor"><textarea class="ace_text-input">{{pre_code}}</textarea></pre>
            </div>
        </div>

        <div class="submit-section" id="submitSection">
            <div class="submit-resizer" id="submitDragMe"></div>
            <div class="result"></div>
            <button class="btn-submit" onclick="submit()">提交代码</button>
        </div>
        <button class="show-submit-btn" id="showSubmitBtn" onclick="showSubmitSection()">显示提交区域</button>
    </div>

    <!-- 自定义脚本 -->
    <script src="/js/app.js"></script>
    <script src="/js/judge.js"></script>
    
    <!-- 确保主题切换功能初始化 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 手动初始化主题
            if (typeof initTheme === 'function') {
                initTheme();
            }
            
            // 确保主题切换按钮可点击
            const themeToggle = document.getElementById('themeToggle');
            if (themeToggle) {
                themeToggle.style.pointerEvents = 'auto';
                themeToggle.style.cursor = 'pointer';
            }

            // 渲染Markdown内容
            const content = document.getElementById('markdown-content');
            if (content) {
                const rawText = content.textContent;
                content.innerHTML = marked.parse(rawText);
                // 应用代码高亮
                content.querySelectorAll('pre code').forEach((block) => {
                    hljs.highlightElement(block);
                });
            }
        });
    </script>
</body>

</html>
